<template>
  <div class="login-container">
    <div class="login-box">
      <h1 class="login-title">欢迎登录</h1>
      <el-form 
        :model="loginForm" 
        :rules="rules" 
        ref="loginFormRef"
        class="login-form"
        label-position="top"
      >
        <el-form-item prop="username">
          <el-input 
            v-model="loginForm.username" 
            placeholder="请输入用户名"
            class="custom-input"
          />
        </el-form-item>
        
        <el-form-item prop="password">
          <el-input 
            v-model="loginForm.password" 
            type="password" 
            placeholder="请输入密码"
            class="custom-input"
          />
        </el-form-item>
        
        <el-form-item>
          <div class="login-wrapper">
            <el-button 
              type="primary" 
              class="login-button" 
              @click="handleLogin" 
              :loading="loading"
              :disabled="loading"
            >
              登录
            </el-button>
          </div>
        </el-form-item>
        <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { login } from '../api/auth';

const router = useRouter();
const loginForm = reactive({
  username: '',
  password: '',
});
const loading = ref(false);
const loginFormRef = ref(null);
const errorMessage = ref('');

const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, message: '用户名长度至少为3个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少为6个字符', trigger: 'blur' }
  ],
});

const handleLogin = () => {
  loginFormRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true;
      errorMessage.value = '';
      
      try {
        const user = await login(
          loginForm.username,
          loginForm.password
        );
        localStorage.setItem('isAuthenticated', 'true');
        localStorage.setItem('user', JSON.stringify(user));
        localStorage.setItem('token', user.token);
        
        router.push({ name: 'home' });
      } catch (error) {
        errorMessage.value = error.message || '登录失败，请检查网络或凭证';
        ElMessage.error(errorMessage.value);
      } finally {
        loading.value = false;
      }
    } else {
      return false;
    }
  });
};
</script>

<style scoped>
/* 样式部分保持不变 */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #BC8F8F 0%, #BC8F8F 100%);
}

.login-box {
  background: white;
  padding: 2.5rem;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}

.login-title {
  color: #8b5cf6;
  text-align: center;
  margin-bottom: 2rem;
  font-size: 1.8rem;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* 修复输入框宽度 */
.login-form .el-form-item {
  width: 100%;
}

.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;
}

.login-button {
  position: relative;
  height: 48px;
  width: 180px;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #FF416C 0%, #FF4B2B 100%) !important;
  border: none !important;
  color: white !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
  box-shadow: 0 4px 12px rgba(255, 65, 108, 0.3) !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

.login-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(255, 65, 108, 0.4) !important;
}

.login-button:active {
  transform: translateY(1px) !important;
  box-shadow: 0 2px 8px rgba(255, 65, 108, 0.3) !important;
}

.login-button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, white 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.login-button:hover::before {
  opacity: 0.2;
}

.login-button.is-loading {
  background: linear-gradient(135deg, #FF6B9A 0%, #FF7B54 100%) !important;
}

.error-message {
  color: #ef4444;
  text-align: center;
  margin-top: 1rem;
}


/* 输入框基础样式 */
.custom-input :deep(.el-input__inner) {
  padding: 0 1rem;
  height: 48px;
  border-radius: 8px;
  border: 2px solid #f3e8ff;
  color: #8b5cf6;
  background-color: white;
  transition: all 0.3s ease;
  width: 90%;
  font-size: 20px;
}

/* 悬停状态 */
.custom-input :deep(.el-input__inner:hover) {
  border-color: #d8b4fe;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.1);
}

/* 聚焦状态 */
.custom-input :deep(.el-input__inner:focus) {
  outline: none;
  border-color: #c084fc;
  box-shadow: 0 0 0 2px rgba(192, 132, 252, 0.3);
  transform: translateY(-2px);
}

/* 错误状态 */
.el-form-item.is-error :deep(.el-input__inner) {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.3);
}

/* 禁用状态 */
.custom-input :deep(.el-input__inner.is-disabled) {
  background-color: #f9fafb;
  border-color: #e5e7eb;
  color: #9ca3af;
}
</style>  